<script lang="ts" setup>
import { ref } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const userName = ref('');
const emailAddress = ref('');
const validationUserName = ref(true);
const validationEmailAddress = ref(true);
const subscribed = ref(false);

const { $fetch } = useFetch();

const { data: listing } = useAsyncData(
  'home:tempalte3:footer',
  () => $fetch('/footer/getFooterList', { method: 'post' }),
);

const today = new Date();

const validateUserName = () => {
  validationUserName.value = true;

  if (!userName.value) {
    validationUserName.value = false;
    return false;
  }

  return true;
}

const validateEmailAddress = () => {
  validationEmailAddress.value = true;

  if (!emailAddress.value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailAddress.value)) {
    validationEmailAddress.value = false;
    return false;
  }

  return true;
}

const submit = async (e: Event) => {
  e.preventDefault();

  const isUserName = validateUserName();
  const isEmailAddress = validateEmailAddress();

  if (!isUserName || !isEmailAddress) {
    return false;
  }

  const { isSuccess } = await $fetch('/email/subscribeEmail', {
    method: 'post',
    data: {
      userName: userName.value,
      emailAddress: emailAddress.value,
    },
  });

  if (isSuccess) {
    subscribed.value = true;
  }
}
</script>

<template>
  <section class="mt-32 rounded-5 bg-[#fff] p-24 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <template v-if="!subscribed">
      <h3 class="text-16 color-hex-292929 font-500 leading-22">
        {{ $t('home.home.footer.subscription.title') }}
      </h3>

      <div class="mt-16 border-b-1 border-hex-F7F7F7 pb-24">
        <form @submit="submit">
          <div>
            <input
              type="text"
              v-model.trim="userName"
              :placeholder="$t('home.home.footer.subscription.field1.title')"
              class="h-32 w-full border-1 rounded-4 px-8 text-14 text-hex-292929 focus-visible:(outline-unset)"
              :class="[
                validationUserName ?
                  'border-hex-E8E8E8 focus-visible:(border-primary-1 outline-unset) hover:(border-primary-1)'
                  : 'border-hex-FF4D4F focus-visible:(border-hex-FF4D4F outline-unset) hover:(border-hex-FF4D4F)'
              ]"
            >
            <div class="relative h-24">
              <div class="absolute top-4 text-12 text-hex-FF4D4F leading-none" v-if="!validationUserName">{{ $t('home.home.footer.subscription.field1.error') }}</div>
            </div>
          </div>
          <div>
            <input
              type="text"
              v-model.trim="emailAddress"
              :placeholder="$t('home.home.footer.subscription.field2.title')"
              class="h-32 w-full border-1 rounded-4 px-8 text-14 text-hex-292929 focus-visible:(outline-unset)"
              :class="[
                validationEmailAddress ?
                  'border-hex-E8E8E8 focus-visible:(border-primary-1 outline-unset) hover:(border-primary-1)'
                  : 'border-hex-FF4D4F focus-visible:(border-hex-FF4D4F outline-unset) hover:(border-hex-FF4D4F)'
              ]"
            >
            <div class="relative h-32">
              <div class="absolute top-4 text-12 text-hex-FF4D4F leading-none" v-if="!validationEmailAddress">{{ $t('home.home.footer.subscription.field2.error') }}</div>
            </div>
          </div>
          <div>
            <button type="submit" class="h-32 w-full border-1 border-hex-345de2 rounded-4 bg-hex-345de2 text-14 text-hex-fff font-500 leading-32">
              {{ $t('home.home.footer.subscription.subscribe') }}
            </button>
          </div>
        </form>
      </div>
    </template>
    <template v-else>
      <div class="border-b-1 border-hex-F7F7F7 pb-24">
        <div class="flex-x-center">
          <img src="@/home/assets/common/subscription.svg" class="h-118 w-154">
        </div>
        <h3 class="mt-20 text-center text-16 color-hex-292929 font-500 leading-22">{{ $t('home.home.footer.subscription.success.title') }}</h3>
        <div class="mt-16 text-center text-14 text-hex-8B8B8B leading-22">
          {{ $t('home.home.footer.subscription.success.content') }}
        </div>
      </div>
    </template>

    <div class="border-b-1 border-hex-F7F7F7 pb-12 text-14 color-hex-8b8b8b font-400 leading-22">
      <div v-for="item in listing" :key="item.id" class="mt-12 break-all">
        {{ item.footerContent }}
      </div>
    </div>

    <div class="mt-12 flex-y-center gap-24 text-14 color-hex-8b8b8b font-400 leading-22">
      <a href="https://docs.atomgit.com/" target="_blank">{{ $t('home.home.template3.footer.title1') }}</a>
      <a href="https://docs.atomgit.com/agreements/privacy/" target="_blank">{{ $t('home.home.template3.footer.title2') }}</a>
      <a href="https://docs.atomgit.com/agreements/terms-of-service/" target="_blank">{{ $t('home.home.template3.footer.title3') }}</a>
    </div>

    <i18n-t keypath="home.home.footer.content" scope="global" tag="div" class="mt-12 text-14 color-hex-8b8b8b font-400 leading-22">
      <template #year>
        {{ today.getFullYear() }}
      </template>
    </i18n-t>
  </section>
</template>

<style lang="scss" scoped>
</style>
